<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿小米商城首页</title>
	<link rel="stylesheet" href="./css/main.css">
</head>
<body>
	<!-- 顶部导航 -->
	<div class="top">
		<div class="top_mid">
			<div class="top_left">
				<a href="">小米商城</a>|
				<a href="">MIUI</a>|
				<a href="">米聊</a>|
				<a href="">游戏</a>|
				<a href="">多看阅读</a>|
				<a href="">云服务</a>|
				<a href="">金融</a>|
				<a href="">小米商城移动版</a>|
				<a href="">问题反馈</a>|
				<a href="">Select Region</a>
			</div>
			<div class="top_right">
				<a href="">登录</a>|
				<a href="">注册</a>|
				<a href="">消息通知</a>|
				<a class="car" href=""><i class="iconfont">&#xe60c;</i>购物车（0）</a>
			</div>
		</div>
	</div>
	<!-- 顶部导航 -->
	<!-- 头部开始 -->
	<div class="header">
		<div class="header_mid">
			<div class="menu">
				<div class="logo">
					<a href=""></a>
				</div>
				<div class="ad">
					<a href=""></a>
				</div>
				<div class="hot_pro">
					<a href="">小米手机</a>
					<a href="">红米</a>
					<a href="">平板 · 笔记本</a>
					<a href="">电视</a>
					<a href="">盒子 · 影音</a>
					<a href="">路由器</a>
					<a href="">智能硬件</a>
					<a href="">服务</a>
				</div>
				<div class="search">
					<input type="text" class="keywords">
					<input type="button" class="btn iconfont" value="&#xe616;">
					<div class="word"><span>红米4X</span><span>人工智能语音电视</span></div>
				</div>
			</div>
			<div class="banner">
				<div class="banner_list">
					<img src="./images/banner.jpg" alt="">
				</div>
				<ul class="menu_list">
					<li class="menu_itme"><a href="">手机 电话卡</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">路由器 智能硬件</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">手机 电话卡</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">路由器 智能硬件</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">手机 电话卡</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">路由器 智能硬件</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">手机 电话卡</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">路由器 智能硬件</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">手机 电话卡</a><i class="iconfont"></i></li>
					<li class="menu_itme"><a href="">路由器 智能硬件</a><i class="iconfont"></i></li>
				</ul>
			</div>
			<div class="hot">
				<ul class="tool">
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
					<li class="tool_item"><i class="iconfont">&#xe908;</i>选择手机</li>
				</ul>
				<a href="" class="hot_img"><img src="./images/hot1.jpg" alt=""></a>
				<a href="" class="hot_img"><img src="./images/hot2.jpg" alt=""></a>
				<a href="" class="hot_img"><img src="./images/hot3.jpg" alt=""></a>
			</div>
			<div class="star">
				<div class="title">
					<h2>小米明星单品</h2>
					<div class="click">
						<span class="iconfont"></span>
						<span class="iconfont right"></span>
					</div>
				</div>
				<ul class="content">
					<li class="item">
						<img src="./images/star1.png" alt="">
						<a class="name" href="">小米5s Plus</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<span class='price'>2299元起</span>
					</li>
					<li class="item">
						<img src="./images/star2.png" alt="">
						<a class="name" href="">小米5s Plus</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<span class='price'>2299元起</span>
					</li>
					<li class="item">
						<img src="./images/star1.png" alt="">
						<a class="name" href="">小米5s Plus</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<span class='price'>2299元起</span>
					</li>
					<li class="item">
						<img src="./images/star2.png" alt="">
						<a class="name" href="">小米5s Plus</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<span class='price'>2299元起</span>
					</li>
					<li class="item last">
						<img src="./images/star1.png" alt="">
						<a class="name" href="">小米5s Plus</a>
						<p class="desc">双向快充，高密度锂聚合物电芯</p>
						<span class='price'>2299元起</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 头部结束 -->
	<!-- 主体开始 -->
	<div class="main">
		<div class="main_mid">
			<div class="hard">
				<div class="title">
					<h2>智能硬件</h2>
					<a href="">查看全部<span class="iconfont"></span></a>
				</div>
				<div class="content">
					<div class="ad"><img src="./images/ad1.jpg" alt=""></div>
					<ul class="list">
						<li class="item">
							<img src="./images/hard1.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard2.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard1.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard2.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard1.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard2.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard1.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard2.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>

					</ul>
				</div>
			</div>
			<div class="hard">
				<div class="title">
					<h2>搭配</h2>
					<a class="title_cate active" href="">热门耳机</a>
					<a class="title_cate" href="">音箱</a>
					<a class="title_cate" href="">电源电池</a>
					<a class="title_cate" href="">存储卡</a>
				</div>
				<div class="content">
					<div class="ad">
						<a href=""><img src="./images/ad2.jpg" alt=""></a>
						<a href=""><img src="./images/ad3.jpg" alt=""></a>
					</div>
					<ul class="list">
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item last">
							<div class="item_son">
								<p class="left">
									<a href="">小米蓝牙音箱</a>
									<span>199元</span>
								</p>
								<a class="right" href="">
									<img src="./images/hard5.jpg" alt="">
								</a>
							</div>
							<div class="item_son">
								<p class="left">
									<a href="">小米蓝牙音箱</a>
									<span>199元</span>
								</p>
								<a class="right" href="">
									<img src="./images/hard5.jpg" alt="">
								</a>
							</div>
						</li>

					</ul>
				</div>
			</div>
			<div class="hard">
				<div class="title">
					<h2>周边</h2>
					<a class="title_cate active" href="">热门</a>
					<a class="title_cate" href="">服装</a>
					<a class="title_cate" href="">米兔</a>
					<a class="title_cate" href="">生活周边</a>
				</div>
				<div class="content">
					<div class="ad">
						<a href=""><img src="./images/ad4.jpg" alt=""></a>
						<a href=""><img src="./images/ad5.jpg" alt=""></a>
					</div>
					<ul class="list">
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard4.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item">
							<img src="./images/hard3.jpg" alt="">
							<a class="name" href="">小米5s Plus</a>
							<p class="desc">双向快充，高密度锂聚合物电芯</p>
							<span class='price'>2299元起</span>
						</li>
						<li class="item last">
							<div class="item_son">
								<p class="left">
									<a href="">小米蓝牙音箱</a>
									<span>199元</span>
								</p>
								<a class="right" href="">
									<img src="./images/hard5.jpg" alt="">
								</a>
							</div>
							<div class="item_son">
								<p class="left">
									<a href="">小米蓝牙音箱</a>
									<span>199元</span>
								</p>
								<a class="right" href="">
									<img src="./images/hard5.jpg" alt="">
								</a>
							</div>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 主体结束 -->
</body>
</html>